<template>
  <div class="advanced-timeline">
    <!-- 时间轴容器 -->
    <div class="timeline-container" ref="timelineContainer">
      <div class="timeline-wrapper">
        <!-- 时间轴主线 -->
        <div class="timeline-line"></div>
        
        <!-- 时间节点 -->
        <div 
          v-for="(event, index) in timelineData" 
          :key="`${event.patentId}-${event.type}-${index}`"
          class="timeline-item"
          :class="{
            'timeline-item--left': index % 2 === 0,
            'timeline-item--right': index % 2 === 1,
            [`timeline-item--${event.type}`]: true
          }"
          :style="{ '--index': index }"
          @click="handleEventClick(event)"
        >
          <!-- 时间节点圆点 -->
          <div class="timeline-dot">
            <div class="timeline-dot-inner">
              <Icon 
                :icon="event.type === '申请' ? 'ant-design:file-text-outlined' : 'ant-design:eye-outlined'"
                :size="16"
              />
            </div>
          </div>
          
          <!-- 事件卡片 -->
          <div class="timeline-card">
            <div class="timeline-card-header">
              <div class="timeline-date">{{ formatDate(event.date) }}</div>
              <div class="timeline-type" :class="`type-${event.type}`">
                {{ event.type }}
              </div>
            </div>
            
            <div class="timeline-card-body">
              <h4 class="timeline-title">{{ event.title }}</h4>
              <p class="timeline-description">{{ event.description }}</p>
              
              <div class="timeline-meta">
                <div v-if="event.inventor" class="meta-item">
                  <Icon icon="ant-design:user-outlined" />
                  <span>{{ event.inventor }}</span>
                </div>
                <div v-if="event.institution" class="meta-item">
                  <Icon icon="ant-design:bank-outlined" />
                  <span>{{ event.institution }}</span>
                </div>
                <div v-if="event.ipcClass" class="meta-item">
                  <Icon icon="ant-design:tag-outlined" />
                  <span>{{ event.ipcClass }}</span>
                </div>
              </div>
              
              <div v-if="event.summary" class="timeline-summary">
                <p>{{ truncateText(event.summary, 100) }}</p>
              </div>
            </div>
            
            <div class="timeline-card-footer">
              <Button 
                size="small" 
                type="link" 
                @click.stop="handleViewDetail(event)"
              >
                查看详情
              </Button>
              <Button 
                size="small" 
                type="link" 
                @click.stop="handleViewPatent(event)"
              >
                查看专利
              </Button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div v-if="loading" class="timeline-loading">
      <Spin size="large" />
      <p>正在加载时间脉络数据...</p>
    </div>
    
    <!-- 空状态 -->
    <div v-if="!loading && timelineData.length === 0" class="timeline-empty">
      <Icon icon="ant-design:clock-circle-outlined" :size="64" />
      <h3>暂无时间脉络数据</h3>
      <p>请调整筛选条件或检查数据源</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick } from 'vue';
import { Button, Spin } from 'ant-design-vue';
import { Icon } from '/@/components/Icon';
import type { PatentTimelineNode } from '../TimeLine.types';

interface Props {
  timelineData: PatentTimelineNode[];
  loading?: boolean;
}

interface Emits {
  (e: 'eventClick', event: PatentTimelineNode): void;
  (e: 'viewDetail', event: PatentTimelineNode): void;
  (e: 'viewPatent', event: PatentTimelineNode): void;
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
});

const emit = defineEmits<Emits>();

const timelineContainer = ref<HTMLElement>();

// 格式化日期
const formatDate = (dateStr: string) => {
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 截断文本
const truncateText = (text: string, maxLength: number) => {
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
};

// 处理事件点击
const handleEventClick = (event: PatentTimelineNode) => {
  emit('eventClick', event);
};

// 查看详情
const handleViewDetail = (event: PatentTimelineNode) => {
  emit('viewDetail', event);
};

// 查看专利
const handleViewPatent = (event: PatentTimelineNode) => {
  emit('viewPatent', event);
};

// 初始化时间轴
onMounted(() => {
  nextTick(() => {
    // 可以在这里添加时间轴的初始化逻辑
    // 比如自动滚动到最新事件、添加动画效果等
  });
});
</script>

<style lang="less" scoped>
.advanced-timeline {
  position: relative;
  min-height: 400px;
  padding: 20px 0;
}

.timeline-container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.timeline-wrapper {
  position: relative;
  padding: 20px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(
    180deg,
    #1890ff 0%,
    #52c41a 30%,
    #faad14 60%,
    #ff4d4f 100%
  );
  border-radius: 3px;
  transform: translateX(-50%);
  box-shadow: 
    0 0 20px rgba(24, 144, 255, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.2);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    background: linear-gradient(
      180deg,
      rgba(24, 144, 255, 0.1) 0%,
      rgba(82, 196, 26, 0.1) 30%,
      rgba(250, 173, 20, 0.1) 60%,
      rgba(255, 77, 79, 0.1) 100%
    );
    border-radius: 5px;
    z-index: -1;
  }
}

.timeline-item {
  position: relative;
  width: 100%;
  margin-bottom: 60px;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  animation-delay: calc(var(--index) * 0.1s);
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &.timeline-item--left {
    .timeline-card {
      margin-left: 0;
      margin-right: calc(50% + 30px);
      text-align: right;
    }
  }
  
  &.timeline-item--right {
    .timeline-card {
      margin-left: calc(50% + 30px);
      margin-right: 0;
      text-align: left;
    }
  }
  
  &.timeline-item--申请 {
    .timeline-dot-inner {
      background: #1890ff;
      color: white;
    }
  }
  
  &.timeline-item--公布 {
    .timeline-dot-inner {
      background: #52c41a;
      color: white;
    }
  }
}

.timeline-dot {
  position: absolute;
  left: 50%;
  top: 20px;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  z-index: 10;
  
  .timeline-dot-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.15),
      0 0 0 4px rgba(255, 255, 255, 0.8),
      0 0 0 8px rgba(24, 144, 255, 0.1);
    border: 3px solid white;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    
    &::before {
      content: '';
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 50%;
      background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    &:hover {
      transform: scale(1.15);
      box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 0 0 6px rgba(255, 255, 255, 0.9),
        0 0 0 12px rgba(24, 144, 255, 0.15);
      
      &::before {
        opacity: 1;
      }
    }
  }
}

.timeline-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(240, 240, 240, 0.8);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1890ff, #52c41a, #faad14);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    box-shadow: 
      0 12px 40px rgba(0, 0, 0, 0.12),
      0 4px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(24, 144, 255, 0.2);
    
    &::before {
      opacity: 1;
    }
  }
}

.timeline-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.timeline-date {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.timeline-type {
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  
  &.type-申请 {
    background: #e6f7ff;
    color: #1890ff;
    border: 1px solid #91d5ff;
  }
  
  &.type-公布 {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
  }
}

.timeline-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.timeline-description {
  margin: 0 0 16px 0;
  color: #595959;
  line-height: 1.5;
}

.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #8c8c8c;
  
  .anticon {
    font-size: 12px;
  }
}

.timeline-summary {
  margin-bottom: 16px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  border-left: 3px solid #1890ff;
  
  p {
    margin: 0;
    font-size: 13px;
    color: #595959;
    line-height: 1.5;
  }
}

.timeline-card-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.timeline-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #666;
  
  p {
    margin-top: 16px;
    font-size: 14px;
  }
}

.timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #999;
  
  h3 {
    margin: 16px 0 8px 0;
    font-size: 18px;
    color: #666;
  }
  
  p {
    margin: 0;
    font-size: 14px;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-5px);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .timeline-container {
    padding: 0 10px;
  }
  
  .timeline-line {
    left: 20px;
    transform: none;
  }
  
  .timeline-item {
    &.timeline-item--left,
    &.timeline-item--right {
      .timeline-card {
        margin-left: 50px;
        margin-right: 0;
        text-align: left;
      }
    }
  }
  
  .timeline-dot {
    left: 20px;
    transform: none;
  }
}
</style>

